import React, {useEffect, useState} from 'react';
import * as echarts from 'echarts'
import {getBarList} from "../../api";

const PieChart = () => {
    useEffect( () => {
        // 获取 DOM 元素
        const chartDom = document.getElementById('barChart');
        // 初始化 ECharts 实例
        const myChart = echarts.init(chartDom);
        // 指定图表å的配置项和数据
        const option = {
            title: {
                text: '饼图示例'
            },
            tooltip: {},
            series: [
                {
                    type: 'pie',
                    data: [
                        {
                            value: 335,
                            name: '直接访问'
                        },
                        {
                            value: 234,
                            name: '联盟广告'
                        },
                        {
                            value: 1548,
                            name: '搜索引擎'
                        }
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);

        // 组件卸载时销毁图表
        return () => {
            myChart.dispose();
        };
    }, []); // 空依赖数组确保 useEffect 只在组件挂载时运行一次

    return (
        <div id="barChart" style={{ width: '100%', height: '400px' }}></div>
    );
};

export default PieChart;